<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="insName">
        <el-input
          v-model="queryParams.insName"
          placeholder="请输入姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="insGender">
        <el-select v-model="queryParams.insGender" placeholder="请输入性别" clearable @keyup.enter.native="handleQuery"
                   :style="{width: '100%'}">
          <el-option v-for="(item, index) in insGenderOptions" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="margin-left: 70px;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-switch v-model="dataShowType" active-text="网格展示" inactive-text="列表展示">
      </el-switch>
    </el-row>

    <el-table v-if="!dataShowType" v-loading="loading" :data="instructorList" >
      <el-table-column label="姓名" align="center" prop="insName" />
      <el-table-column label="像片" align="center" prop="insPicture" >
        <template slot-scope="scope">
          <img style="width: 40px;height: 40px;border-radius: 50%" :src="scope.row.insPicture"/>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="insGender" >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.insGender==0">女</el-tag>
          <el-tag v-if="scope.row.insGender==1">男</el-tag>
        </template>
      </el-table-column>

<!--      <el-table-column label="招生人数" align="center" prop="insGender" >-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.checkedNumber}}/{{scope.row.number}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="职称" align="center" prop="insProfessor" />
      <el-table-column label="职务" align="center" prop="insCommander" />
      <el-table-column label="专业方向选择" align="center" prop="" >
        <template slot-scope="scope">
          <el-select placeholder="选择专业" size="mini" v-model="scope.row.subId" clearable filterable>
            <el-option v-for="subject in scope.row.subs" :label="subject.majorName+'--'+subject.subName+':'+subject.checkedNumber+'/'+subject.pgNumber" :value="subject.id"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250px">
        <template slot-scope="scope">
          <el-button

            size="small"
            type="info"
            icon="el-icon-more"
            @click="toDetail(scope.row.id)"
          > 详细信息</el-button>
          <el-button
            :disabled="studentInfo.isChoose==1"
            size="small"
            type="primary"
            icon="el-icon-check"
            @click.stop="chooseIns(scope.row.id,scope.row.subId)"
          > 选择导师</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin-left: 2%; margin-top: 50px;" v-if="dataShowType" v-loading="loading">
      <el-col :offset="8"><div v-if="instructorList.length==0">没有数据</div></el-col>
      <el-col  :lg="8" :sm="24" v-for="ins in instructorList">
        <div  class="ins-card"  @click="toDetail(ins.id)">
          <div class="ins-left">
            <img :src="ins.insPicture" alt="">
          </div>
          <div class="ins-right">
            <div><b>姓名: </b>{{ins.insName}}</div>
            <div v-if="ins.insGender==1"><b>性别: </b>男</div>
            <div v-if="ins.insGender==0"><b>性别: </b>女</div>
            <div><b>职称: </b>{{ins.insProfessor}}</div>
            <el-select placeholder="选择专业" size="mini" v-model="ins.subId" clearable filterable>
              <el-option v-for="subject in ins.subs" :label="subject.majorName+'--'+subject.subName+':'+subject.checkedNumber+'/'+subject.pgNumber" :value="subject.id"></el-option>
            </el-select>
            <div>
              <el-button
                :disabled="studentInfo.isChoose==1"
                style="margin-left: 20%;"
                size="mini"
                type="primary"
                icon="el-icon-check"
                @click.stop="chooseIns(ins.id,ins.subId)"
              > 选择导师</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
  import { listInstructorAccepted } from "@/api/mentor/instructor";
  import { getStudentDetailByUserId,chooseIns} from "../../../api/mentor/student";
  import { getInfo } from "../../../api/login";
  import { isSelect,getNewRound } from "../../../api/mentor/round";


  export default {
    name: "selectInstructor",
    components: {
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 导师表格数据
        instructorList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          insName: undefined,
          insGender: undefined,
          subId:undefined,
        },
        insGenderOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 0
        }],
        dataShowType:true,
        user:{},
        studentInfo:{},
        chooseForm:{
          insId:undefined,
          stuId:undefined,
          subId:undefined,
          type:1
        }
      };
    },
    async created() {

      var flag = await this.checkUser()
      if (!flag){
        this.$message.warning("本菜单只对学生开放")
        return this.$router.push("/")
      }



      //获取轮次时间信息
      const res = await isSelect(0);
      // console.log(res)
      if (!res.data){
        await this.$alert(`${res.msg}`, "未到选择时间", {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            return this.$router.push('/')
          }
        })
      }

      if (!res.data.isSelect){
        await this.$alert(`当前选择时间段${res.data.stuStart}--${res.data.stuEnd}`, "未到选择时间", {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            return this.$router.push('/')
          }
        })
      }else {
        //
        await this.$alert(`<div>当前选择时间段:</div><div>${res.data.stuStart}   ——   ${res.data.stuEnd}</div>`, {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true
        })
      }



      await this.getStudentInfo()

      //如果当前学生信息未通过审核，跳转到个人中心页面
      if (this.studentInfo.examineStatus!=3){
        await this.$alert(`个人信息未通过审核`, "提示", {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            return this.$router.push('/student/center')
          }
        })
        return
      }

      this.getList();
    },
    methods: {
      /** 查询导师列表 */
      getList() {
        this.loading = true;
        this.queryParams.subId = this.studentInfo.subId
        this.queryParams.stuId = this.studentInfo.stuId
        listInstructorAccepted(this.queryParams).then(response => {
          this.instructorList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      toDetail(id){
        this.$router.push(`/instructor/detail/${id}`)
      },
      //获取学生信息
      async getStudentInfo() {
        const info = await getInfo();
        this.user = info.user
        const res = await getStudentDetailByUserId(this.user.userId)
        this.studentInfo = res.data
      },
      //选择导师
      async chooseIns(insId,subId) {
        if (subId==null){
          return this.$message.warning("请选择专业方向")
        }
        this.chooseForm.insId = insId
        this.chooseForm.subId = subId
        this.chooseForm.stuId = this.studentInfo.stuId
        const res = await chooseIns(this.chooseForm.insId,this.chooseForm.stuId,this.chooseForm.subId,this.chooseForm.type)
        // console.log(res)
        if (res.code == 200) {
          //选择成功
          this.$message.success("选择成功")
          return this.$router.push("/student/myInstructor")
        }
      },
      async checkUser() {
        // console.log(user)
        const info = await getInfo()
        let user = info.user
        for (let i = 0; i < user.roles.length; i++) {
          if (user.roles[i].roleKey == 'student') {
            return true
          }
        }
        return false
      },

    }
  };
</script>

<style>

  .ins-card {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    transition: all 0.5s;
    height: 240px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin:30px;
  }

  .ins-card:hover {
    transition: all 0.3s;
    box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
    -webkit-box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
    -moz-box-shadow: 0px 1px 4px 3px rgba(111,111,111,0.46);
  }

  .ins-card .ins-left {
    width: 120px;
    height: 180px;
    border: 1px solid #ccc;
    border-radius: 2px;
  }
  .ins-card .ins-left img {
    width: 100%;
    height: 100%;
  }

  .ins-card .ins-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: space-evenly;
  }

  .ins-card .ins-right div {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }


</style>
